<template>
  <div class="home">
    <Announcement />

    <div class="main-layout">
      <div class="content-area">
        <div class="top-posts" v-if="topPosts.length">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="12" v-for="post in topPosts" :key="post.id" style="margin-bottom: 20px;">
              <BlogCard :post="post" />
            </el-col>
          </el-row>
        </div>

        <div class="recent-posts">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :md="8" v-for="post in recentPosts" :key="post.id" style="margin-bottom: 20px;">
              <BlogCard :post="post" />
            </el-col>
          </el-row>
        </div>

        <div class="pagination">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="50"
            :current-page="currentPage"
            @current-change="handlePageChange"
          />
        </div>
      </div>

      <div class="sidebar">
        <AuthorCard />
        <CategoriesCard />
        <TagsCard />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useBlogStore } from '../store/blogStore'
import Announcement from '../components/Announcement.vue'
import BlogCard from '../components/BlogCard.vue'
import AuthorCard from '../components/AuthorCard.vue'
import CategoriesCard from '../components/CategoriesCard.vue'
import TagsCard from '../components/TagsCard.vue'

const blogStore = useBlogStore()
const currentPage = ref(1)

const topPosts = computed(() => blogStore.getTopPosts)
const recentPosts = computed(() => {
  const allPosts = blogStore.getRecentPosts
  const postsPerPage = 6
  const start = (currentPage.value - 1) * postsPerPage
  return allPosts.slice(start, start + postsPerPage)
})

const handlePageChange = (page: number) => {
  currentPage.value = page
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
}
</script>

<style scoped>
.home {
  width: 100%;
}

.main-layout {
  display: flex;
  gap: 20px;
}

.content-area {
  flex: 1;
}

.sidebar {
  width: 300px;
}

.top-posts {
  margin-bottom: 30px;
}

.recent-posts {
  margin-bottom: 30px;
}

.pagination {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

@media (max-width: 768px) {
  .main-layout {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
  }
}
</style>
